<template>
  <view class="order">
    <nav-bar :list="tabs" :activeIndex="type-1"
      @tabsItemChange="handleTabsItemChange" />
    <view class="order_main">
      <view v-for="item in orders" :key="item.order_id" class="order_item"
        @click="watchDetail(item.goods)">
        <view class="order_no_row">
          <view class="order_no_text">订单编号</view>
          <view class="order_no_value">{{item.order_number}}</view>
        </view>
        <view class="order_price_row">
          <view class="order_price_text">订单价格</view>
          <view class="order_price_value">￥{{item.order_price}}</view>
        </view>
        <view class="order_time_row">
          <view class="order_time_text">订单日期</view>
          <view class="order_time_value">{{item.create_time_cn}}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  import {
    getStorage
  } from "../../api/Storage.js"
  export default {
    data() {
      return {
        type: 0,
        orders: [],
        tabs: [{
            id: 0,
            name: "全部",
          },
          {
            id: 1,
            name: "待付款",
          },
          {
            id: 2,
            name: "待发货",
          },
          {
            id: 3,
            name: "退款/退货",
          }
        ]
      };
    },
    watch: {
      type: function(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.getOrders(newVal);
        }
      }
    },
    onLoad(options) {
      this.type = options.type ? options.type * 1 : 1
    },
    onShow() {
      const token = getStorage("token");
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/index'
        });
        return;
      }
    },
    methods: {
      watchDetail(goods) {
        let list = []
        goods.forEach(v => {
          let obj = {
            goods_id: v.goods_id,
            goods_small_logo: v.goods_small_logo,
            goods_name: v.goods_name,
            goods_price: v.goods_price
          }
          list.push(obj)
        })

        uni.navigateTo({
          url: "/pages/list/list?list=" + encodeURIComponent(JSON.stringify(
            list)) + "&type=order"
        })
      },
      // 获取订单列表的方法
      getOrders(type) {
        this.$http({
          url: "/my/orders/all",
          data: {
            type
          }
        }).then(res => {
          console.log(res);
          this.orders = res.orders.map(v => ({
            ...v,
            create_time_cn: (new Date(v.create_time * 1000)
              .toLocaleString())
          }))
        })

      },

      handleTabsItemChange(index) {
        this.type = index + 1
      }
    }
  }
</script>

<style lang="scss">
  .order {
    .order_main {
      .order_item {
        padding: 20upx;
        border-bottom: 1upx solid #ccc;
        color: #666;

        .order_no_row {
          display: flex;
          padding: 10upx 0;
          justify-content: space-between;

          .order_no_text {}

          .order_no_value {}
        }

        .order_price_row {
          display: flex;
          padding: 10upx 0;
          justify-content: space-between;

          .order_price_text {}

          .order_price_value {
            color: var(--themeColor);
            font-size: 32upx;
          }
        }

        .order_time_row {
          display: flex;
          padding: 10upx 0;
          justify-content: space-between;

          .order_time_text {}

          .order_time_value {}
        }
      }
    }
  }
</style>
